<template>
  <div class="table-container">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" width="80" />
      <el-table-column prop="email" label="邮箱" />
    </el-table>

    <el-pagination
        class="pagination"
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="totalItems"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface TableItem {
  id: number
  name: string
  age: number
  email: string
}

// 表格数据
const tableData = ref<TableItem[]>([])
// 当前页码
const currentPage = ref(1)
// 每页条数
const pageSize = 10
// 总条数
const totalItems = ref(50)

// 生成模拟数据
const generateMockData = (): TableItem[] => {
  const data: TableItem[] = []
  for (let i = 1; i <= totalItems.value; i++) {
    data.push({
      id: i,
      name: `用户${i}`,
      age: Math.floor(Math.random() * 30) + 18,
      email: `user${i}@example.com`
    })
  }
  return data
}

// 分页变化处理
const handlePageChange = (page: number) => {
  currentPage.value = page
  updateTableData()
}

// 更新表格数据
const updateTableData = () => {
  const allData = generateMockData()
  const start = (currentPage.value - 1) * pageSize
  const end = start + pageSize
  tableData.value = allData.slice(start, end)
}

// 初始化加载数据
onMounted(updateTableData)
</script>

<style scoped>
.table-container {
  padding: 20px;
}

.pagination {
  margin-top: 20px;
  justify-content: center;
}
</style>